<template>
  <div class="home page-tab">
    <Navbar :appTitle="appTitle" :leftArrow="false"/>
    <div class="warp" style="padding-top:0.1rem;">
      <template v-for="item in applicationList">
        <div class="outBox" v-if="item.permission" :key="item.sortNo">
          <div class="topModuleName">{{ item.combName }}</div>
          <div class="botBox">
            <!-- <template v-for="item in item.permission"> -->
            <div
              class="botItem"
              :key="item.permission.id"
              @click="routerChange(item.permission)"
            >
              <div class="itemLeft">
                <img
                  :src="`${apiBaseUrlDownload}${item.permission.attachment}`"
                  alt=""
                  class="itemLeft_img listPng"
                  v-if="item.permission.attachment"
                />
                <img
                  src="~@/assets/img/application_1.png"
                  alt=""
                  class="itemLeft_img listPng"
                  v-else
                />
                <div class="itemLeft_text">{{ item.permission.name }}</div>
              </div>
              <img src="~@/assets/img/goNext.png" alt="" class="goNext" />
            </div>
            <!-- </template> -->
          </div>
        </div>
      </template>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import { apiBaseUrlDownload } from "@/utils/request";
import { getMenuTreeByPIds } from "@/api/system";

import { LING_YANG_ROLE_TYPE } from "@/store/mutation-types";
export default {
  components: { Navbar, TabBar },
  data() {
    return {
      apiBaseUrlDownload,
      appTitle: "报表",
      rtitle: "",
      rname: "", //search
      applicationList: [],
    };
  },
  computed: {},
  mounted() {},

  created() {
    let antelopeFlag = this.$ls.get(LING_YANG_ROLE_TYPE);
    let params = {};
    if (antelopeFlag) {
      params.antelopeFlag = antelopeFlag;
    }
    getMenuTreeByPIds(params).then((res) => {
      this.applicationList = res.result;
    });
  },
  methods: {
    routerChange(item) {
      this.$router.push({
        path: item.url,
        query: {
          navTitle: item.name,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
div.outBox {
  margin-bottom: 0.1rem;
  background-color: $color29;
  div.topModuleName {
    box-sizing: border-box;
    padding: 0.16rem;
    font-size: 0.16rem;
    font-weight: bold;
    color: #191f25;
    border-bottom: 0.005rem solid #f0f0f0;
  }

  div.botBox {
    box-sizing: border-box;
    padding: 0 0.14rem;
    div.botItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0.15rem 0rem;
      border-bottom: 0.005rem solid #f0f0f0;
      div.itemLeft {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img.itemLeft_img {
          margin-right: 0.08rem;
        }

        div.itemLeft_text {
          font-size: 0.14rem;
          color: #191f25;
        }
      }
    }
  }
}
</style>
